import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import classNames from 'classnames';
import queryString from 'query-string';

import "./less/leftbar.css";

import { 
  URL,
  TASKDETAIL_FROM
} from '../../config';

export class App extends Component {
  handleClick (ref) {
    switch (ref) {
      case "projects":
        this.props.history.push(URL.main_page);
        break;
      case "settings":
        this.props.history.push(URL.team_setting_page);
        break;
      case "servers":
        this.props.history.push(URL.hosts_page);
        break;
      case "online":
        this.props.history.push(URL.deploying_page + "?page=1");
        break;
      case "lined":
        this.props.history.push(URL.lined_page + "?page=1");
        break;
      case "databases":
        this.props.history.push(URL.databases_page);
        break;
      default:
        this.props.history.push(URL.main_page);
    }
  }

  render () {
    return (
      <ul className="leftbar">
        <li onClick={this.handleClick.bind(this, "settings")} className={classNames("baritem", this.props.location.pathname === URL.team_setting_page ? "selected" : null)}>
          <i className={classNames("icon", "settings")}>&#xe617;</i>
          团队设置
        </li>
        <li onClick={this.handleClick.bind(this, "projects")} className={classNames("baritem", this.props.location.pathname === URL.main_page ? "selected" : null)}>
          <i className={classNames("icon", "projects")}>&#xe7a7;</i>
          团队项目
        </li>
        <li onClick={this.handleClick.bind(this, "lined")} className={classNames("baritem", this.props.location.pathname === URL.lined_page ? "selected" : null)}>
          <i className={classNames("icon", "testing")}>&#xe74a;</i>
          已上线任务
        </li>
        <li onClick={this.handleClick.bind(this, "online")} className={classNames("baritem", this.props.location.pathname === URL.deploying_page || (this.props.location.pathname === URL.taskdetail_page && parseInt(queryString.parse(this.props.location.search).from) === TASKDETAIL_FROM.DEPLOYING) ? "selected" : null)}>
          <i className={classNames("icon", "online")}>&#xe645;</i>
          进行中的上线单
        </li>
        <li onClick={this.handleClick.bind(this, "servers")} className={classNames("baritem", this.props.location.pathname === URL.hosts_page ? "selected" : null)}>
          <i className={classNames("icon", "servers")}>&#xe7b6;</i>
          服务器连接
        </li>
        <li onClick={this.handleClick.bind(this, "databases")} className={classNames("baritem", this.props.location.pathname === URL.databases_page ? "selected" : null)}>
          <i className={classNames("icon", "databases")}>&#xe679;</i>
          数据库连接
        </li>
        {/* <li className="baritem">
          <i className={classNames("icon", "command")}>&#xe61d;</i>
          命令模板
        </li> */}
      </ul>
    )
  }
}

export default withRouter(App);